<template>
	<div>
		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<a @click="backFn">部门管理</a>
					<i class="fa fa-circle"></i>
				</li>
        <li>
          <span>新建部门</span>
        </li>
			</ul>
		</div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	  		<el-form-item label="部门名称" prop="orgName">
	    		<el-input v-model="ruleForm.orgName" maxlength="12"></el-input>
	  		</el-form-item>
		  	<el-form-item label="上级部门" prop="parentOrgId">
				<el-select v-model="ruleForm.parentOrgId" placeholder="请选择上级部门">
					<el-option
							v-for="item in departmentlist.records"
							:key="item.id"
							:label="item.orgName"
							:value="item.id">
					</el-option>
				</el-select>

			</el-form-item>
		  	<!--<el-form-item label="部门类型" prop="bmlx">-->
		    	<!--<el-select v-model="ruleForm.bmlx" placeholder="请选择部门类型">-->
			      	<!--<el-option label="超级管理员" value="chaoji"></el-option>-->
			      	<!--<el-option label="管理员" value="guanli"></el-option>-->
			      	<!--<el-option label="普通用户" value="putong"></el-option>-->
		    	<!--</el-select>-->
		  	<!--</el-form-item>-->
	  		<el-form-item label="备注" prop="remark">
	    		<el-input v-model="ruleForm.remark" maxlength="80"></el-input>
	  		</el-form-item>
		  	<el-form-item>
			    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
			    <el-button @click="backFn">取消</el-button>
		  	</el-form-item>
		</el-form>
	</div>
</template>

<script>

	import { DepartmentSrv } from './department.service';
    import { Notification } from 'element-ui';

export default {
    data() {
      return {

        departmentlist:{},
        ruleForm: {
            orgName: '',
            remark: '',
            parentOrgId:''

        },
        rules: {
          orgName:[
            { required: true, message: '请输入部门名称', trigger: 'blur' },

              {
                  pattern: /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/,
                  message: '部门名称不能包含特殊字符',
                  trigger: 'blur'
              }

          ],
          sjbm: [
            { required: true, message: '请选择上级部门', trigger: 'change' }
          ],
          bmlx: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      getDepartmentList(){
        var params = {
          pageNo:1,
          pageSize:10
        }
        DepartmentSrv.getDepartmentList(params).then((result) =>{
          if(result.code === 0){
            this.departmentlist = result.data;
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              var params = this.ruleForm;
              DepartmentSrv.createdp(params).then((result) =>{
                  if(result.code === 0){
                      Notification.success({
                          title: "新建部门",
                          message: '操作成功',
                          offset: 50
                      })
                      this.backFn();
                  }else{

				  }
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      backFn:function(){
      	this.$router.push('/department');
      }
    },
    created(){
      this.getDepartmentList();
    }
  }
</script>

<style scoped>
  .el-form{
    width:500px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .el-select{
    width: 100%;
  }
</style>